<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: acer
  Date: 2018/12/17
  Time: 18:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>债权打包列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="/static/js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
    <script src="/static/layuiadmin/layui/layui.js" charset="utf-8" type="text/javascript"></script>
</head>
<body>
<div style="margin-bottom: 5px;">
    <ins class="adsbygoogle" style="display:inline-block;width:970px;height:50px"
         data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>
</div>


<div class="demoTable">
    <form id="myform" action="" method="post" class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">创建时间:</label>
                <div class="layui-input-inline">
                    <input name="startTime" lay-verify="startTime" type="text" class="layui-input" id="test5" placeholder="yyyy-MM-dd HH:mm:ss">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">创建人:</label>
                <div class="layui-inline">
                    <input class="layui-input" name="pname" id="pname" placeholder="" autocomplete="off">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">债权包名称:</label>
                <div class="layui-inline">
                    <input class="layui-input" name="clfoundname" id="clfoundname" placeholder="" autocomplete="off">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">状态:</label>
                <div class="layui-input-inline" pane>
                    <select name="status" id="status" class="layui-input  layui-select">
                        <option value="0" selected="selected">请选择</option>
                    </select>
                </div>
            </div>
        </div>
    </form>

    <div class="layui-form-item" style="margin-left: 1280px;margin-top: -60px" >
        <button class="layui-btn" data-type="reload" onclick="sear()">搜索</button>
    </div>
</div>

<table class="layui-hide" id="idTest" lay-filter="demo"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a>
    {{#
    if(d.clstatus=="待审核"){ }}
    <a name="toolDel" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">编辑</a>
    {{#  } }}
</script>

<script>
    layui.use('table', function () {
        var $ = layui.$;
        var params = JSON.stringify($('#myform').serializeObject());
        var table = layui.table;
        //执行一个 table 实例
        table.render({
            elem: '#idTest',
            url: 'claimPage?params=' + encodeURIComponent(params),   //数据接口
            title: '',
            page: true,
            limit: 10,
            limits: [10, 20, 30, 40, 50],
            cols: [[ //表头
                {type: 'numbers', title: '序号', align: 'center', width: 80}
                , {field: 'clid', title: '债权打包ID', sort: true, align: 'center', hide: true}
                , {field: 'clfoundtime', title: '创建时间', sort: true, align: 'center'}
                , {field: 'people', title: '创建人', sort: true, align: 'center' , templet: function (t) {return t.people.realname;}}
                , {field: 'clfoundname', title: '债权包名称', sort: true, align: 'center'}
                , {field: 'clfoundnum', title: '打包客户数量', sort: true, align: 'center'}
                , {field: 'clstatus', title: '状态', sort: true, align: 'center'}
                , {fixed: 'right', title: '操作', align: 'center', toolbar: '#barDemo'}
            ]]
            , id: "test"
        });
    });

    //查询方法
    function sear() {
        var params = JSON.stringify($('#myform').serializeObject());
        console.log(params);
        layui.use(['laypage', 'layer', 'table'], function () {
            var laydate = layui.laydate //日期
                , laypage = layui.laypage //分页
                , table = layui.table; //表格
            table.reload('test', {
                url: 'claimPage?params=' + encodeURIComponent(params) //数据接口
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });
    }

    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        var ins22 = laydate.render({
            elem: '#test5'
            ,type:'datetime'
        })
    });


    layui.use('table', function () {
        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(demo)', function (obj) {
            console.log(obj)
        });
        //监听单元格编辑
        table.on('edit(test)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            layer.msg('[ID: ' + data.noticeId + '] ' + field + ' 字段更改为：' + value);
        });
        //监听工具条
        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url:"../DeleFoodServlet",    //请求的url地址
                        dataType:"json",   //返回格式为json
                        contentType:"application/json",
                        async:true,//请求是否异步，默认为异步，这也是ajax重要特性
                        data:{"fid":data.fid},  //参数值
                        type:"GET",   //请求方式
                        success:function(data){
                            //请求成功时处理
                            layer.alert(data.msg, function(index) {
                                location.reload();
                            })
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                parent.layer.open({
                    title: '修改',
                    maxmin: true,
                    type: 2,
                    content: '/UpdateFoodEchoServlet?fid=' + data.fid,
                    area: ['800px', '600px'],
                    end: function () {
                        location.reload();
                    }
                })
            }
        });

        var $ = layui.$, active = {
            getCheckData: function () { //获取选中数据
                var checkStatus = table.checkStatus('idTest')
                    , data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            , getCheckLength: function () { //获取选中数目
                var checkStatus = table.checkStatus('idTest')
                    , data = checkStatus.data;
                layer.msg('选中了：' + data.length + ' 个');
            }
            , isAll: function () { //验证是否全选
                var checkStatus = table.checkStatus('idTest');
                layer.msg(checkStatus.isAll ? '全选' : '未全选')
            }
            , reload: function () {
                //执行重载
                table.reload('test', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>

<script>
    jQuery.prototype.serializeObject = function () {
        var obj = new Object();
        $.each(this.serializeArray(), function (index, param) {
            if (!(param.name in obj)) {
                obj[param.name] = param.value;
            }
        });
        return obj;
    };
</script>

<script>
    /**
     * 获取状态
     */
    onload = function (ev) {
        $.ajax({
            url: "claimList",  //请求路径
            datatype: "json",           //返回的格式
            data: {id: "123"},           //参数
            type: "post",               //请求方式
            success: function (data) {  //请求成功以后
                var c = document.getElementById("status");
                console.log(data.data);
                for (let d in data.data) {
                    //创建新的option对象
                    var newop = document.createElement("option");
                    //给新增的对象赋值
                    newop.value = data.data[d];
                    newop.innerHTML = data.data[d];
                    //把option对象添加到下拉列表中
                    c.appendChild(newop);
                }
                layui.form.render('select');
            }
        });
    }
</script>

</body>
</html>